<template>
    <div>
        <div class="head-name">广东</div>
        <div class="hello">

            <div class="box">
                <div class="chart">
                    <div id="charts" ref="chart"></div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import {computed, onMounted, onUnmounted, reactive} from "vue";
    import 'echarts-gl';
    import 'echarts/map/js/province/guangdong.js';
    import geoJson from '../assets/guangdong.json';
    import 'echarts-extension-amap';
    import {water} from "../api";
    import {mapGetters} from "vuex";
    import { useStore } from 'vuex'; // 引入useStore 方法
    import rain from '../assets/rain.json';

    export default {
        name: "gd",
        setup() {
            const store = useStore()  // 该方法用于返回store 实例
            let myEcharts = echarts;
            let chart = null;
            let object = {
                user_id: store.state.userinfo.id,
                nums: 10
            }


            let arrayData = reactive({
                arrData: []
            });
            onMounted(() => {
                initChart();
            });
            onUnmounted(() => {
                myEcharts.dispose;
                chart.dispose();
                chart = null;
            });

            async function initChart() {
                arrayData.arrData = await rainPredict();
                console.log("arr", arrayData.arrData);
                chart = myEcharts.init(document.getElementById("charts"), "purple-passion");
                // 注册可用的地图
                myEcharts.registerMap('guangdong', geoJson);
                // 设置echarts的option
                chart.setOption({
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        alwaysShowContent: false,
                        formatter: function (params) {
                            return 'Value: ' + params.value[2];
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 100,
                        calculable: false,
                        inRange: {
                            color: ["#ffffff", "#00ff00", "#006400", "#87cefa", "#0000FF", "#FF1493", "#A52A2A"],
                        },
                        pieces: [
                            { min: 0, max: 1, color: "#FFFFFF" },           // 0 到 1：白色
                            { min: 1, max: 1.5, color: "#00FF00" },         // 1 到 1.5：绿色
                            { min: 1.5, max: 7, color: "#006400" },         // 1.5 到 7：深绿色
                            { min: 7, max: 15, color: "#87CEFA" },          // 7 到 15：浅蓝
                            { min: 15, max: 40, color: "#0000FF" },         // 15 到 40：蓝色
                            { min: 40, max: 50, color: "#FF1493" },         // 40 到 50：粉红
                            { min: 50, max: Infinity, color: "#A52A2A" },   // 50以上：棕红
                        ],

                        textStyle: {
                            color: '#323c48',
                        },
                    },
                    geo: {
                        map: 'guangdong',
                        roam: false,
                        itemStyle: {
                            areaColor: '#fff',
                            borderColor: '#323c48',
                        },
                        label: {
                            show: true,
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            type: 'heatmap',
                            coordinateSystem: 'geo',
                            legendHoverLink: true,//是否启用图例 hover(悬停) 时的联动高亮。
                            hoverAnimation: true,//是否开启鼠标悬停节点的显示动画
                            data: arrayData.arrData.map(({ID, lon, lat, degree, lasting}) => ({
                                // name,
                                value: [lon, lat, degree],
                                // value:[0,60,100]
                            })),
                            z: 99999,
                            pointSize: 5,
                            blurSize: 0,

                        },
                    ],
                });
                window.onresize = function () {
                    chart.resize();
                };
            }

            async function rainPredict() {
                let rainNums = rain;
                console.log("waterNums:", rainNums)
                arrayData.arrData = rainNums
                return rainNums
            }


            return {
                arrayData,
            }
        }
    }
</script>

<style scoped lang="scss">
    .head-name {
        color: #b0e3ff;
        font-weight: bold;
        font-size: xx-large;
        padding: 50px;
    }

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    @media screen and (min-width: 700px) {
        .chart {
            border: 3px double #c7e8ff;
            margin: 60px;
            width: 70%;
            height: 65vh;

            #charts {
                width: 100%;
                height: 65vh
            }
        }
    }


</style>
